<template>
	<view v-if="shenheStatus == 0" class="page-list">
		<view>
			<!-- 头部搜索栏 -->
			<view class="df_center bgF paddingS">
				<view class="" style="width: 530rpx;">
					<u-search :input-style="{width:'530rpx',height:'64rpx'}" :show-action="false" height="64rpx"
						bg-color="#F2F2F2" placeholder="请输入订单号称或昵称" v-model="keyword" @change="gotoSearch"></u-search>
				</view>
				<view class="seleIconStyle" @click="iconChange">
					<view class="iconfont" :class="{colorRed:checkShow}" style="font-size: 60rpx;">&#xe751;</view>
				</view>
			</view>

			<!-- 切换栏 -->
			<view class="bgF p24 fsTyle">
				<scroll-view class="scroll-view_H" scroll-x="true">
					<view class="" style="display: flex;align-items: center; justify-content: space-around;">
						<view v-for="(item,index) in select_classificationArr" :key="index"
							class="seleltClassification scroll-view-item_H" :class="status==item.status ? 'active':''"
							@click="selelt_classification(item.status)">{{item.name}}</view>
					</view>
				</scroll-view>
				<view class="iconStyle" @click="stateDetails">
					<view class="iconfont" :class="{colorRed:stateShow}" style="font-size: 50rpx;">&#xe82b;</view>
				</view>
			</view>

			<!-- 切换栏2 -->
			<view class="switchContent" v-if="stateShow">
				<text :class="status==item.status ? 'active1':''" class="switchContentText mr24"
					v-for="(item,index) in select_classificationArr" :key="index"
					@click="selelt_classification(item.status)">
					{{item.name}}
				</text>
			</view>

			<!-- 商品栏 -->
			<view class="" style="padding: 0rpx 24rpx 24rpx 24rpx;"  v-if="listData.length!=0">
				<u-checkbox-group shape="circle" placement="column" @change="checkboxChange">
					<view class="df_a_center mt24" v-for="(item, index) in listData" :key="index">
						<view v-if="checkShow" class=""
							style="display: flex;justify-content: center; align-items: center; ">
							<u-checkbox activeColor="#F0250E" :name="item.id" v-model="item.checked">
							</u-checkbox>
						</view>
						<view class="content">
							<!-- 商品详细信息 -->
							<view class="casd">
								<view class="imgStyle">
									<u-image border-radius="10rpx" width="180rpx" height="180rpx"
										:src="item.cover_pic"></u-image>
								</view>
								<view class="pl20" style="flex-grow: 1;">
									<view class="introduce">
										{{item.name}}
									</view>
									<view class="salesVolume">
										<text>销量 {{item.virtual_sales}}</text>
										<text class="ml24">库存 {{item.goods_num}}</text>
									</view>
									<view class="price">
										<view class="original_price">
											<text style="font-size:28rpx;margin-left: 3rpx;">¥ {{item.md_price}}</text>
										</view>
										<view class="platform_selling_price">
											平台售价/¥ {{item.price}}
										</view>
									</view>
								</view>
							</view>
							<view class="surePickup">
								<view class="btnstyle">
									<view class="deldeStyle" @click="changePrice(item, index, 1)">
										改价格
									</view>
									<view class="deldeStyle ml16" @click="modifyInventory(item, index, 2)">
										改库存
									</view>
									<view class="deldeStyle ml16" @click="statusProduct(item.status,item.id)">
										{{item.status==1?'下架':'上架'}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</u-checkbox-group>
			</view>
			
			<view class="nos " v-if="listData.length==0">
				<view class="iconfont" style="font-size: 80rpx;">&#xe7b7;</view>
				<view class="" style="margin-top: 10rpx;">
					暂无商品
				</view>
			</view>
			
		</view>
		<!-- 底部全选 -->
		<view class="footer" v-if="checkShow">
			<view class="footerCheckBox" @click="checkedAll">
				<view class="footerText">
					<radio style="transform: scale(0.7)" color="#FA3534" value="r1" :checked="checkAll" />选中
				</view>
			</view>
			<view class="footerBtn">
				<view class="" style="width: 136rpx;">
					<u-button @click="allstatusProduct1" type="error" shape="circle">下架</u-button>
				</view>
				<view class="" style="width: 192rpx; margin-left: 24rpx;">
					<u-button @click="allstatusProduct2" type="error" shape="circle">上架</u-button>
				</view>
			</view>
		</view>

		<pagePopAttr ref="pagePopAttr" :hoverStartTime="hoverStartTime" :customStyle="customStyle" :goodsId="goodsId"
			:status="batchStatus" :md_id="md_id"></pagePopAttr>
			
		<pagePopInp ref="pagePopInp" @changeValue="changeValue" :title="getTitle" :status="batchStatus"></pagePopInp>


		<view class="" style="display: flex;justify-content: center;color: #8C8C8C; margin-top: 20rpx;">
			{{prompt}}
		</view>
	</view>
	<Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
	import Shenhe from '@/components/shenhe/shenhe';
	import goodsDetail from '../components/goodsDetail/index.vue';
	import pagePopAttr from "./components/page-pop-attr.vue";
	import pagePopInp from "./components/page-pop-inp.vue";

	export default {
		components: {
			goodsDetail,
			Shenhe,
			pagePopAttr,
			pagePopInp,
		},
		data() {
			return {
				// 单个商品暂存价格和数量
				price:null,
				numTs:null,
				// 暂时存储选中状态
				TemporaryStorage: '',
				// 下拉提示
				prompt: '—— 下拉加载更多！——',
				// 动态判断复选框的显示和隐藏
				checkShow: false,
				// 动态控制状态详情显示隐藏
				stateShow: false,
				// 搜索框双向绑定的值
				keyword: '',
				// 底部全选按钮值
				checkAll: false,
			
				ids: null,
				// 门店id
				md_id: null,
			
				// 滑块数据
				select_classificationArr: [{
						status: -1,
						name: "全部"
					},
					{
						status: 1,
						name: "售卖中"
					},
					{
						status: 0,
						name: "已下架"
					},
					{
						status: 2,
						name: "已售空"
					}
				],
				// 修改价格滑块模拟数据
				list: [{
					name: '黑色'
				}, {
					name: '深灰色'
				}, {
					name: '灰粉色'
				}, {
					name: '蓝粉色'
				}, {
					name: '渐变色',
				}],
			

				customStyle: {
					background: "#F0250E",
					color: "#fff",
					borderRadius: "32px",
					display: "inline-block",
					height: "72rpx",
					lineHeight: "72rpx",
					marginLeft: "16rpx",
				},

				hoverStartTime: 1000000,
				batchStatus: 1, // 1.改价格 2.改库存
				goodsId: undefined,



				// 旧的
				tabList: [{
						status: -1,
						name: this.$t('person.cashStatus1'),
					},
					{
						status: 0,
						name: this.$t('mdAdmin.noClerk'),
					},
					{
						status: 1,
						name: this.$t('person.status4'),
					},
				],
				listData: [],
				currentTab: 0,
				page: 1,
				pageSize: 20,
				row_count: 0,
				status: -1,
				no_clerk_count: 0,
				choosedOrder: [],
				isChoose: false,
				scene: '',
			};
		},
		onLoad(t) {
			this.md_id = t.id
			if (t?.status) {
				this.status = t.status;
				let index = this.tabList.findIndex((d, index) => {
					return d.status == t.status;
				});
				this.currentTab = index;
			}
			if (t?.scene) {
				let scene = t.scene;
				this.scene = scene;
				this.status = 0;
				this.currentTab = 1;
			}
		},
		onReachBottom() {
			if (this.page * this.pageSize >= this.row_count) {
				this.prompt = '—— 没有更多订单了！——'
				return;
			}
			this.page++;
			this.getListData({
				md_id: this.md_id,
				pageNo: this.page,
				keyword: this.keyword,
				status: this.status,
				pageSize: this.pageSize,
				loadMore: true,
				saas_user_id: this.scene,
			});
		},
		computed: {
			getTitle() {
				return this.batchStatus === 1 ?
					this.$t("list.price") :
					this.$t("newAdmin.goods.num");
			},
		},
		onShow() {
			this.getListData({
				md_id: this.md_id,
				pageNo: this.page,
				keyword: this.keyword,
				status: this.status,
				pageSize: this.pageSize,
				saas_user_id: this.scene,
			});
		},
		watch: {},
		methods: {

			// 单个修改价格及库存
			changeValue(value) {
				let {
					id,
					batchStatus: status
				} = this,
				params = {
					id: this.ids,
					md_id: this.md_id,
				};

				if (status === 1) {
					params.goods_price = value;
					params.goods_num = this.numTs;
				} else {
					params.goods_num = value;
					params.goods_price = this.price;
				}

				this.$allrequest.mdAdmin.changePriceNum(params).then((res) => {
					this.$utils.toast(res.msg);

					if (res.code === 0) {
						uni.showToast({
							title: res.msg,
							duration: 1500
						});
						let $el = this.$refs.pagePopInp,
							item = this.list.find((el) => String(el.id) === String(id)),
							str = status === 1 ? "price" : "goods_num";
						this.$set(item, str, value);
						// 刷新数据
						this.page = 1
						this.prompt = '—— 下拉加载更多！——'
						this.manyUs()
						this.getListData({
							md_id: this.md_id,
							pageNo: this.page,
							keyword: this.keyword,
							status: this.status,
							pageSize: this.pageSize,
							saas_user_id: this.scene,
						});
						$el.showPopup = false;
						$el.disabled = false;
					}
				});
			},


			// 点击修改价格
			changePrice(item, index, num) {
				this.manyUs()
				this.batchStatus = num;
				if (item.use_attr !== "0") {
					this.$refs.pagePopAttr.showPopup = true;
					this.goodsId = item.id;
				} else {
					this.ids = item.id
					this.numTs=item.goods_num
					let $el = this.$refs.pagePopInp;
					$el.showPopup = true;
					$el.value = num === 1 ? item.md_price : item.goods_num;
				}
			},
			// 修改库存
			modifyInventory(item, index, num) {
				this.manyUs()
				this.batchStatus = num;
				if (item.use_attr !== "0") {
					this.$refs.pagePopAttr.showPopup = true;
					this.goodsId = item.id;
				} else {
					this.ids = item.id
					this.price=item.price
					let $el = this.$refs.pagePopInp;
					$el.showPopup = true;
					$el.value = num === 1 ? item.price : item.goods_num;
				}

			},

			// 全选
			checkedAll() {
				this.checkAll = !this.checkAll
				if (this.checkAll) {
					let s1 = this.listData.map(val => {
						val.checked = true;
						return val.id
					})
					this.checkboxChange(s1)
				} else {
					let s1 = this.listData.map(val => {
						val.checked = false;
					})
					this.checkboxChange(s1)
				}

			},
			// 复选框
			checkboxChange(n) {
				this.TemporaryStorage = n.join(',');
			},
			// 单点上下架
			statusProduct(val, id) {
				if (val == 1) {
					val = 0
				} else if (val == 0) {
					val = 1
				}
				this.fucProduct({
					// 门店id
					md_id: this.md_id,
					// 商品id
					ids: id,
					// 上下架状态1上架0下架
					status: val
				});
			},
			// 全部下架
			allstatusProduct1() {
				uni.showLoading({
					title: this.$t('facePay.requesting'),
				});
				this.fucProduct({
					md_id: this.md_id,
					ids: this.TemporaryStorage,
					status: 0
				});
			},
			// 全部上架
			allstatusProduct2() {
				uni.showLoading({
					title: this.$t('facePay.requesting'),
				});
				this.fucProduct({
					md_id: this.md_id,
					ids: this.TemporaryStorage,
					status: 1
				});
			},
			// 封装上下架函数
			fucProduct(params) {
				this.$allrequest.mdAdmin.upAndDownShelves(params)
					.then(res => {
						uni.hideLoading();
						if (!res.code) {
							uni.showToast({
								title: res.msg,
								icon: 'none',
							});
							this.manyUs()
							this.page = 1
							setTimeout(() => {
								this.getListData({
									md_id: this.md_id,
									pageNo: this.page,
									keyword: this.keyword,
									status: this.status,
									pageSize: this.pageSize,
									saas_user_id: this.scene,
								});
							}, 1500);
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
							});
						}
					});
			},
			// 控制滑块切换
			selelt_classification(index) {
				this.page = 1
				this.manyUs()
				this.status = index
				this.getListData({
					md_id: this.md_id,
					pageNo: this.page,
					keyword: this.keyword,
					status: this.status,
					pageSize: this.pageSize,
					saas_user_id: this.scene,
				});
			},
			// 关闭复选框，清除全选状态函数
			manyUs() {
				this.stateShow=false
				this.TemporaryStorage = ''
				this.checkShow = false
				this.checkAll = false
				this.listData.map(val => {
					val.checked = false;
				})
			},
			// 控制列表详情显示与隐藏
			stateDetails() {
				this.stateShow = !this.stateShow
			},
			//控制搜索右边icon状态变化和复选按钮的出现与隐藏
			iconChange() {
				this.checkShow = !this.checkShow
			},


			getListData(params) {
				this.$allrequest.mdAdmin.ProductList(params).then(res => {
					if (!res.code) {
						if (params.loadMore) {
							this.listData = [...this.listData, ...res.data.list];
						} else {
							this.listData = res.data.list;
							if (!res.data.totalCount || res.data.totalCount<=3) {
								this.prompt = ''
							} else if (res.data.totalCount <= 4) {
								this.prompt = '没有更多商品了！'
							}
						}
						this.row_count = res.data.totalCount;
						this.no_clerk_count = res.data.no_clerk_count;
					}
				});
			},
			// 搜索
			gotoSearch(val) {
				this.page = 1
				this.prompt = '—— 下拉加载更多！——'
				this.manyUs()
				this.getListData({
					md_id: this.md_id,
					pageNo: this.page,
					keyword: this.keyword,
					status: this.status,
					pageSize: this.pageSize,
					saas_user_id: this.scene,
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.nos {
	     margin-top: 300rpx;
		 text-align: center;
		 color: #C0C4CC;
	}


	.imgStyle {
		width: 180rpx;
		height: 180rpx;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
	}

	.ml16 {
		margin-left: 16rpx;
	}

	.btnstyle {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		margin-top: 24rpx;
	}

	.deldeStyle {
		background: #F2F2F2;
		border-radius: 120rpx 120rpx 120rpx 120rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #262626;
		font-style: normal;
		text-transform: none;
		padding: 12rpx 24rpx;
	}

	.sureStyle {
		width: 144rpx;
		height: 58rpx;
		background: #FDF1F0;
		border-radius: 120rpx 120rpx 120rpx 120rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #F0250E;
		line-height: 58rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}

	.surePickup {
		margin-top: 24rpx;
	}

	.surePickupName {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #8C8C8C;
		font-style: normal;
		text-transform: none;
		padding: 24rpx 48rpx;
		border-top: 1px solid #F8F8F8;
		border-bottom: 1px solid #F8F8F8;
	}

	.mr24 {
		margin-right: 24rpx;
	}

	.switchContent {
		width: 702rpx;
		margin: 0rpx auto;
		padding-top: 18rpx;
	}

	.switchContentText {
		border-radius: 120rpx;
		padding: 10rpx 24rpx;
		background-color: #fff;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #262626;
		font-style: normal;
		text-transform: none;
		line-height: 3;
		/* 设置行高，创建上方间距 */
	}

	.colorRed {
		color: #FA3534;
	}

	.footer {
		height: 140rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		padding: 14rpx 24rpx 34rpx 24rpx;
		position: fixed;
		bottom: 0;
	}

	.mb24 {
		margin-bottom: 24rpx;
	}

	.stockUp {
		height: 36rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #F0250E;
		font-style: normal;
		text-transform: none;
	}

	.price {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
	}

	.original_price {
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 24rpx;
		color: #F0250E;
		font-style: normal;
		text-transform: none;
	}

	.platform_selling_price {

		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #262626;
		font-style: normal;
		text-transform: none;
	}

	.orderTime {
		height: 36rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #8C8C8C;
		font-style: normal;
		text-transform: none;
	}

	.pricePlatform {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #262626;
		font-style: normal;
		text-transform: none;
	}

	.moneyConter {
		height: 42rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 28rpx;
		color: #262626;
		font-style: normal;
		text-transform: none;
		display: flex;
		justify-content: flex-end;
	}

	.numConter {
		height: 40rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 24rpx;
		color: #8C8C8C;
		font-style: normal;
		text-transform: none;
		display: flex;
		justify-content: flex-end;
	}

	.money {
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 24rpx;
		font-style: normal;
		text-transform: none;
		color: #F0250E;
	}

	.mt22 {
		margin-top: 22rpx;
	}

	.ml24 {
		margin-left: 24rpx;
	}

	.salesVolume {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #8C8C8C;
		font-style: normal;
		text-transform: none;
		margin-top: 10rpx;
	}

	.casd {
		display: flex;
		width: 100%;
	}

	.content {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 24rpx;
		width: 100%;
	}

	.footerText {
		height: 44rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 32rpx;
		color: #262626;
		font-style: normal;
		text-transform: none;
		display: flex;
		align-items: center;
	}

	.footerCheckBox {
		display: flex;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 32rpx;
		color: #262626;
		font-style: normal;
		text-transform: none;
	}

	.footerBtn {
		display: flex;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-style: normal;
		text-transform: none;
	}

	.introduce {
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 28rpx;
		color: #262626;
		font-style: normal;
		text-transform: none;
	}

	.pl20 {
		padding-left: 20rpx;
	}

	.df_center {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.bgF {
		background-color: #FFF;
	}

	.paddingS {
		padding: 18rpx 15rpx 18rpx 24rpx;
	}

	.seleltClassification {
		margin: 20rpx 52rpx 0rpx 0rpx;
		padding-bottom: 24rpx;
		border-bottom: 3px solid #fff;
	}

	.active {
		border-bottom: 3px solid #F0250E !important;
		color: #F0250E;
		font-weight: 600;
	}

	.active1 {
		color: #F0250E;
	}

	.p24 {
		padding: 0rpx 24rpx;
	}

	.mt24 {
		margin-top: 24rpx;
	}

	.fsTyle {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #262626;
		font-style: normal;
		text-transform: none;
		position: relative;
	}

	.df_a_center_j_b {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.df_a_center {
		display: flex;
		align-items: center;
	}

	.iconStyle {
		width: 88rpx;
		height: 85rpx;
		background: #FFFFFF;
		box-shadow: -4rpx 0rpx 4rpx 2rpx rgba(0, 0, 0, 0.05);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		
		right: 0;
		top: 0;
	}

	.seleIconStyle {
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.df {
		display: flex;
	}

	.buyer {
		width: 420rpx;
		white-space: nowrap;
		/* 防止文本换行 */
		overflow: hidden;
		/* 隐藏溢出的文本 */
		text-overflow: ellipsis;
		/* 显示省略号 */
	}

	.csh {
		width: 96rpx;
		height: 34rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #8C8C8C;
		font-style: normal;
		text-transform: none;
	}

	.content_operate {
		padding: 24rpx 0rpx 0rpx 48rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #8C8C8C;
		font-style: normal;
		text-transform: none;
	}

	.ml20 {
		margin-left: 20rpx;
	}

	.page-list {
		width: 100%;
		min-height: 100vh;
		background: #f2f2f2;
		padding-bottom: calc(env(safe-area-inset-bottom) + 100rpx);
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 90%;
	}
</style>